<template>
	<view>
		<!-- <view class="search-bar" style="position: relative;">
			<uni-row>
				<view class="uni-flex" style="justify-content: space-between; align-items: center;">
					<uni-col :span="20">
						<view style="position: relative;">
							<uni-search-bar radius="100" placeholder="大家都在找 鱼苗养殖" clearButton="auto" cancelButton="none"
								@confirm="search">
								<uni-icons slot="searchIcon" color="#333333" size="18" type="search" />
							</uni-search-bar>
							<button class="btn-round" type="default" size="mini"
								@click="goTo('../search/search')">搜索</button>
						</view>
					</uni-col>
					<uni-col :span="4">
						<view class="custom-weather"><text>24°</text>
							<image mode="widthFix"
								src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/home-cloudy.png"></image>
						</view>
					</uni-col>
				</view>
			</uni-row>

			<view class="uni-flex"
				style="-webkit-justify-content: space-between;justify-content: space-between; align-items: center; flex-wrap: nowrap;">
				<view><text class="search-tips">鱼塘清理</text><text class="search-tips">鱼塘清理</text><text
						class="search-tips">鱼塘清理</text></view>
				<view><text class="fc-white fs12">换一换</text><uni-icons type="loop" color="#ffffff"></uni-icons></view>
			</view>
		</view> -->
		<search-bar ref="search" :classifies='classifies'></search-bar>
		<view class="card-list">
			<view class="card" @click="goTo(`../subsidyDetails/subsidyDetails?id=${item.id}`)" v-for="(item,index) in list" :key="index">
				<view class="title">{{item.title}}</view>
				<view class="con">{{item.resume}}</view>
			</view>
			<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>
		</view>
		<view class="custom-fab" v-if="isTop">
			<view class="item" @click="goTop()"><uni-icons type="arrow-up" color="#ffffff"></uni-icons></view>
		</view>
	</view>
</template>

<script>
	import {
		appQueryAllowancePolicy
	} from "@/api/user.js";

	export default {
		data() {
			return {
				color:"#283241",
				classifies:['7'],
				list: [],
				showLoadMore: false,
				page: 0,
				maxpage: 0,
				timer:'',
				isTop: false
			}
		},
		onLoad() {
			this.showLoadMore = true;
			this.initData();
		},
		onShow(){
			const appAuthorizeSetting = uni.getAppAuthorizeSetting()
			if(appAuthorizeSetting.locationAuthorized == 'authorized'){
				this.timer = setInterval(()=>{
					if(!this.$refs.search.weather){
						uni.getLocation({
							type: 'wgs84'
						}).then((res) => {
							console.log(res)
							this.queryLocation({
								lat: res[1].latitude,
								lng: res[1].longitude
							})
							this.$refs.search.queryWeather(
							{
								lat: res[1].latitude,
								lon: res[1].longitude
							});
						})
					}
					if (this.$refs.search.hotKeyword.length == 0) {
						this.$refs.search.getSearchHotKeys()
					}
				},300000)
			}	
		},
		onUnload(){
			clearInterval(this.timer)
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		
		onReachBottom() {
			console.log("onReachBottom");
			console.log("page", this.page, this.maxpage)
			if (this.page == this.maxpage) {
				this.showLoadMore = false;
				return
			}
			this.showLoadMore = true;
			this.page++;
			this.appQueryAllowancePolicy({ //参数
				"condition": null,
				"pageNum": this.page,
				"pageSize": 10
			});
		},
		onPageScroll: function(e) {
			console.log(e)
			if (e.scrollTop > 100) {
				this.isTop = true;
			} else {
				this.isTop = false;
			}
		},
		methods: {
			initData() {
				this.page = 1;
				this.list = [];
				this.showLoadMore = true;
				this.appQueryAllowancePolicy({ //参数
					"condition": null,
					"pageNum": this.page,
					"pageSize": 10
				});
				uni.stopPullDownRefresh();
			},

			async appQueryAllowancePolicy(options) {
				const res = await appQueryAllowancePolicy(options)
				console.log(res);
				this.maxpage = res.returnObj.navigateLastPage;
				this.list = this.list.concat(res.returnObj.list);
				this.showLoadMore = false;
			},

			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
			goTop() {
				if (wx.pageScrollTo) {
					wx.pageScrollTo({
						scrollTop: 0
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url("https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/nongke-bg.png");
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-color: #F5F5F5;
	}

	.custom-weather {
		color: #ffffff;
		font-size: 40rpx;
		font-family: 'DIN';
		display: flex;
		align-items: center;
		flex-wrap: nowrap;

		image {
			width: 60rpx;
			margin-left: 6rpx;
			// margin-right: 30rpx;
		}
	}
	.custom-fab {
		position: fixed;
		bottom: 60px;
		/* #ifdef MP-WEIXIN */
		bottom: 30px;
		/* #endif */
		right: 25rpx;

		.item {
			background-color: #00B5DD;
			color: #ffffff;
			border-radius: 100%;
			text-align: center;
			width: 40px;
			height: 40px;
			line-height: 40px;
		}
	}
	/* 搜索栏 */
	.search-bar /deep/ .uni-searchbar__box {
		justify-content: left !important;
	}

	.search-tips {
		padding: 2px 8px;
		height: 24px;
		line-height: 24px;
		background-color: #ffffff;
		border-radius: 20px;
		color: #505863;
		font-size: 24rpx;
		margin-left: 24rpx;
	}


	.service-list {
		padding: 30rpx 30rpx;
	}

	.segmented-control {
		background-image: linear-gradient(180deg, #D5F0FF 0%, rgb(255, 255, 255) 100%);
		border-radius: 12px 12px 0 0;
		height: 59px;
	}

	/deep/.segmented-control__text {
		font-size: 28rpx;
		width: 100%;
		height: 100%;
		display: block;
	}

	/deep/.segmented-control__item {
		height: 59px;
		line-height: 59px;
	}

	/deep/.segmented-control__item--text {
		font-size: 32rpx;
		font-weight: 500;
		border-bottom-color: #22AFFF;
	}

	.card-list {
		padding: 30rpx;

		.card {
			background-color: #ffffff;
			border-radius: 12px;
			margin-bottom: 15px;
			padding: 32rpx;

			.title {
				font-size: 32rpx;
				font-weight: 500;
				line-height: 24px;
				color: #283241;
				height: 24px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.con {
				color: #646A74;
				font-size: 24rpx;
				line-height: 22px;
				white-space: normal;
				max-height: 44px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>